<template>
    <section class="form_tong_dao">
	  <el-form ref="form" :model="form" :rules="rules" label-width="120px" v-loading="loading">
	  	<el-form-item label="通道名称" prop="name">
		   <el-input v-model="form.name"  placeholder="请输入通道名称"></el-input>
		</el-form-item>
		<el-form-item label="通道标识">
		   <el-input :disabled=true v-model="form.da" ></el-input>
		</el-form-item>
		<el-form-item label="厂商" prop="factory" required>
		    <el-select v-model="form.factory" placeholder="请选择厂商" >
		      <el-option label="金越" value="1"></el-option>
		      <el-option label="三所" value="2"></el-option>
		    </el-select>
		</el-form-item>
		<el-form-item label="资源分配方式" prop="distribution" required v-if="resourceDisplay==='display'">
		    <el-select v-model="form.distribution" placeholder="请选择分配方式" >
		      <el-option label="独占通道" value="1"></el-option>
		      <el-option label="独占宽带" value="2"></el-option>
		      <el-option label="共享宽带" value="3"></el-option>
		    </el-select>
		</el-form-item>
		<el-form-item label="业务类型" prop="businessType" required>
		    <el-select v-model="form.businessType" placeholder="请选择业务类型" >
		      <el-option label="数据交换" value="1"></el-option>
		      <el-option label="音视频交换" value="2"></el-option>
		    </el-select>
		</el-form-item>
		<el-form-item label="类型" prop="type">
		    <el-select v-model="form.type" placeholder="请选择类型" @change="changType">
		      <el-option label="实时接口" value="1"></el-option>
		      <el-option label="FTP" value="2"></el-option>
		      <el-option label="MQ" value="3"></el-option>
		    </el-select>
		</el-form-item>
		<el-form-item label="A端区域" prop="aaAreaId">
		    <el-select v-model="form.aaAreaId" :disabled="is_disabled" placeholder="请选择A端区域"  @change = "changeArea">
		      <el-option :label="item.name" :value="item.id" v-for="item in area_options_a"></el-option>
		    </el-select>
		</el-form-item>
		<el-form-item label="A端数据源" prop="dataOragin_A">
		    <el-select v-model="form.aaConnDataId" placeholder="请选择A端数据源" >
		      <el-option :label="item.name" :value="item.id" v-for="item in dataOragin_options_a"></el-option>
		    </el-select>
		</el-form-item>
		<el-form-item label="B端区域" prop="bbAreaId">
		    <el-select v-model="form.bbAreaId" :disabled="is_disabled"  placeholder="请选择B端区域"  @change = "changeArea">
		      <el-option :label="item.name" :value="item.id" v-for="item in area_options_b"></el-option>
		    </el-select>
		</el-form-item>
		<el-form-item label="B端数据源" prop="dataOragin_B">
		    <el-select v-model="form.bbConnDataId" placeholder="请选择B端数据源" >
		      <el-option :label="item.name" :value="item.id" v-for="item in dataOragin_options_b"></el-option>
		    </el-select>
		</el-form-item>
		<el-form-item label="A端FTP地址" prop="aaAddress" v-if="form.type=='2' || form.type=='3'">
		   <el-input v-model="form.aaAddress" placeholder="请输入A端FTP地址"></el-input>
		</el-form-item>
		<el-form-item label="B端FTP地址" prop="bbAddress" v-if="form.type=='2' || form.type=='3'">
		   <el-input v-model="form.bbAddress" placeholder="请输入B端FTP地址"></el-input>
		</el-form-item>
		<el-form-item label="A端接口地址" prop="aaAddress" v-if="form.type=='1'">
		   <el-input v-model="form.aaAddress" placeholder="请输入A端接口地址"></el-input>
		</el-form-item>
		<el-form-item label="B端接口地址" prop="bbAddress" v-if="form.type=='1'">
		   <el-input v-model="form.bbAddress" placeholder="请输入B端接口地址"></el-input>
		</el-form-item>
		<!--类型选择ftp时-->
	         <!--*******新增的返回地址*************-->
            <el-form-item label="A端FTP返回地址"  v-if="dbType==='ftp'"  prop="aaAddressBack">
        			<el-input v-model="form.aaAddressBack"  placeholder="请输入A端FTP返回地址"></el-input>
            </el-form-item>
            <el-form-item label="B端FTP返回地址"  v-if="dbType==='ftp'"  prop="bbAddressBack">
        			<el-input  v-model="form.bbAddressBack"  placeholder="请输入B端FTP返回地址"></el-input>
            </el-form-item>
         	<!--*******新增的返回地址*************-->
	  </el-form>   
	  <el-button type="primary"  @click="onSubmit()">确定</el-button>
	  <el-button  @click="onCancel()">取消</el-button>
	  <el-button  type="info"  @click="ReactArea">重选区域</el-button>
    </section>
</template>

<script>
    import {
    	apiGetAreaSearch,
    	apiGetAreaByAreaId,
    	apiChanelDetail
    } from "../css_js_img/apiareaResource"
    
    import {
    	apiConnDataList
    } from "@/views/fuwuServer/components/apiFuwuServer"
    export default {
    	props:{
    		dataOriginId:{
    			type:Number,
    			defalut:0
    		},
    	},
        data() {
          return {
          		area_options_a:[],/*区域*/
          		area_options_b:[],
          		dataOragin_options_a:[],/*数据源*/
          		dataOragin_options_b:[],
          		segments:[],
          		dbType:'db',
				is_disabled:false,
				resourceDisplay: 'hidden',
          		form:{
					name:'',
					factory:'',
					distribution:'',
					businessType:'',
          			type:'',
          			aaAddress:'',
          			bbAddress:'',
          			aaAreaId:'',
          			bbAreaId:'',
          			aaConnDataId:'',
          			bbConnDataId:'',
          			aaAddressBack:'',
          			bbAddressBack:'',
          		},
	          	rules: {
	                name: [
	                    { required: true, message: '请输入名称', trigger: 'blur' },
	                    { min: 3, max: 25, message: '长度在 3 到 25 个字符', trigger: 'blur' }
	                ],
	                aaAreaId: [
	                    { required: true, message: '请选择区域', trigger: 'change' }
	                ],
	                bbAreaId: [
	                    { required: true, message: '请选择区域', trigger: 'change' }
	                ],
	                type: [
	                    { required: true, message: '请选择类型', trigger: 'change' }
	                ],
	                aaAddress: [
	                    { required: true, message: '请输入地址', trigger: 'blur' },
	                ],
	                bbAddress: [
	                    { required: true, message: '请输入地址', trigger: 'blur' },
	                ],
	                aaAddressBack:[
	                	{ required: true, message: '请选择返回地址', trigger: 'blur' }
	                ],
	                bbAddressBack:[
	                	{ required: true, message: '请选择返回地址', trigger: 'blur' }
	                ]
	           },
          		loading:false,
          };
        },
        methods: {
        		changType(val){
        			val==1?this.dbType = 'db':this.dbType = 'ftp'
        		},
        		onCancel(){
        			this.$emit("onCancel")
        		},
        		onSubmit(){
	        		this.$refs['form'].validate((valid) => {
	                    if(valid){
	                    	console.log(this.form);
							this.loading = true;
							if(this.dataOriginId!=0){/*更新*/
								this.form.id = this.dataOriginId
								this.$emit('UpdataData',this.form);
							}else if(this.dataOriginId==0){/*注册*/
								this.$emit('insertData',this.form);
							}
							
	                    }else{
	                        console.log('error submit!!');
	                        return false;
	                    }
	                });
        		},
        		ReactArea(){/*由于区域选择的逻辑太过异常，所以弄个这个按钮，允许后悔*/
        			this.is_disabled = false;
        			this.form.aaAreaId = '';
        			this.form.bbAreaId = '';
        			this.area_options_a =[];
        			this.area_options_b =[];
        			/*******/
        			this.form.aaConnDataId = '';
        			this.form.bbConnDataId = '';
        			this.dataOragin_options_a =[];
        			this.dataOragin_options_b =[];
        			this.mountedGetArea();
        		},
        		getDataOrigin(dataOragin_options,val){/*获取数据源*/
        			let this_segment = 0;
        			this.segments.map(item=>{if(item.id == val){this_segment = item.segment}})
        			if(dataOragin_options.length==0){
	        				apiConnDataList({'segmentId':this_segment,'typeId':2}).then(res=>{
	        					if(res.data.code === 'S100101'){
	        						dataOragin_options= res.data.data.list
	        					}else{
	        						this.$message.error("该网段数据源无数据");
	        					}
	        				})
        			}
        		},
        		changeArea(val){/*这个需求，比较特异*/
        			if(this.form.aaAreaId!=''&&this.form.bbAreaId!=''){/*俩种都点了,想修改*/
        				let this_segment = 0;
        				this.segments.map(item=>{if(item.id == val){this_segment = item.segment}})
        				if(this.dataOragin_options_b.length==0){
	        				apiConnDataList({'segmentId':this_segment,'typeId':2}).then(res=>{
	        					if(res.data.code === 'S100101'){
	        						this.dataOragin_options_b = res.data.data.list
	        					}else{
	        						this.$message.error("该网段数据源无数据");
	        					}
	        				})
        				}
        				if(this.dataOragin_options_a.lengh==0){
	        				apiConnDataList({'segmentId':this_segment,'typeId':2}).then(res=>{
	        					if(res.data.code === 'S100101'){
	        						this.dataOragin_options_a = res.data.data.list
	        					}else{
	        						this.$message.error("该网段数据源无数据");
	        					}
	        				})
        				}
        				this.is_disabled = true;
        			}else if(this.form.aaAreaId!=''&&this.form.bbAreaId==''){/*先点击A*/
        				let this_segment = 0;
        				this.segments.map(item=>{if(item.id == val){this_segment = item.segment}})
        				apiGetAreaByAreaId(this_segment).then((res)=>{
        					if(res.data.code === 'S100101'){
        						this.area_options_b = res.data.data
        					}else{
        						this.$message.error("B端区域无数据");
        					}
        				})
        				apiConnDataList({'segmentId':this_segment,'typeId':2}).then(res=>{
        					if(res.data.code === 'S100101'){
        						this.dataOragin_options_a = res.data.data.list
        					}else{
        						this.$message.error("该网段数据源无数据");
        					}
        				})
        				
        			}else if(this.form.aaAreaId==''&&this.form.bbAreaId!=''){/*先点击B*/
        				let this_segment = 0;
        				this.segments.map(item=>{if(item.id == val){this_segment = item.segment}})
        				apiGetAreaByAreaId(this_segment).then((res)=>{
        					if(res.data.code === 'S100101'){
        						this.area_options_a = res.data.data
        					}else{
        						this.$message.error("A端区域无数据");
        					}
        				})
        				apiConnDataList({'segmentId':this_segment,'typeId':2}).then(res=>{
        					if(res.data.code === 'S100101'){
        						this.dataOragin_options_b = res.data.data.list
        					}else{
        						this.$message.error("该网段数据源无数据");
        					}
        				})
        			}else if(this.form.aaAreaId==''&&this.form.bbAreaId==''){/*bug情况*/
        				alert("请联系工作人员")
        			}
        		},
        		mountedGetArea(){
        			apiGetAreaSearch({/*获取全部区域的名字*/
		        		name:'',
						pageNum:1,
						pageSize:100000000,
		        	}).then((res)=>{
		        		this.area_options_a = res.data.data.list;
		        		this.area_options_b = res.data.data.list;
		        		this.segments = res.data.data.list;
		        	})
        		}
        },
        mounted(){
        	this.mountedGetArea();
        	if(this.dataOriginId!=0){/*更新*/
        		apiChanelDetail({id:this.dataOriginId}).then((res)=>{
        			if(res.data.code == "S100101"){
        				this.form =res.data.data;
								this.form.type =String(res.data.data.type);
								this.form.businessType = String(res.data.data.bizType);
								this.form.factory = String(res.data.data.manufacturer);
        				// console.log('jianonly'+this.form.businessType)
        				this.is_disabled = true;
        			}else{
        				this.$message.error(res.data.msg)
        			}
        		})
        	}
		},
		watch:{
			form:{
				handler(val,oldval){
					if(val.factory==="2"){
						this.resourceDisplay = "display"
					}else{
						this.resourceDisplay = "hidden"
					}
				},
				deep: true
			}
		},    
  };
</script>

<style scoped="scoped">
    
</style>